<template>
  <view class="container">
    <view class="indexbg" :style="{
		background: 'url('+$util.img('/image/huaImg/1.png')+')',
		'background-size': '100% 100%'
	}" lazy-load></view>
     <!-- 顶部导航 -->
    <view class="fixHeader flex-y-center" :style="{paddingTop: StatusBar+'px'}">
       <view class="info"> 
    	<view class="">
    		<view class="font-30 font-weight-8" style="color: #172140;">管家消息</view>
    		<view class="font-20 font-weight-5" style="color: #788096;">呼叫管家，系统消息</view>
    	</view>
       </view>
    </view> 
	<view class="zxClass"> 
		<view class="flex-between m-b-50"> 
			<view class=" kefuleft kefuitem"  :style="{
				background: 'url('+$util.img('/image/huaImg/7.png')+')',
				'background-size': '100% 100%'
			}"
				@click="makePhone()"
			>
				<!-- <view class="">
					<view class="font-weight-8 font-30" style="color: #196960;">呼叫管家</view>
					<view class="font-24" style="color: #196960;">一键呼叫管家</view>
				</view>
				<view class="m-t-34">
						<view class="flex">
							<u-icon name="checkbox-mark" size="10" color="#00C7A8"></u-icon>
							<view class="font-24 m-l-14" style="color: #5D657F;">诉求描述</view>
						</view>
					<view class="flex">
						<u-icon name="checkbox-mark" size="10" color="#00C7A8"></u-icon>
						<view class="font-24 m-l-14" style="color: #5D657F;">需求快速响应</view>
					</view>
				</view> -->
			</view> 
			<view class=" kefuright kefuitem rel" :style="{
				background: 'url('+$util.img('/image/huaImg/8.png')+')',
				'background-size': '100% 100%'
			}">
			<button open-type="contact" class="contact"></button>
				<!-- <view class="">
					<view class="font-weight-8" style="color: #614420;">在线客服</view>
					<view class="font-24" style="color: #614420;">有问题线上问</view>
				</view>
				<view class="m-t-34">
						<view class="flex">
							<u-icon name="checkbox-mark" size="10" color="#00C7A8"></u-icon>
							<view class="font-24 m-l-14" style="color: #5D657F;">常见问题</view>
						</view>
					<view class="flex">
						<u-icon name="checkbox-mark" size="10" color="#00C7A8"></u-icon>
						<view class="font-24 m-l-14" style="color: #5D657F;">微信快速解答</view>
					</view>
				</view> -->
			</view>
		</view>
		<view class="m-t-30 m-b-30 flex" @click="goList('subscribe')">
			<image  :src="$util.img('/image/huaImg/9.png')" class="kficon" mode=""></image>
			<view class="m-l-20 border-bottom flex-1 p-b-20">
				<view class="font-30 font-weight-8">预约消息</view>
				<view class="font-24 flex-between" style="color: #BBBEC9;">
					{{subscribeCount==0?'暂无通知':'点击查看最新的通知'}}
					<view class="dot m-l-auto" v-if="subscribeCount>0"></view>
				</view>
			</view>
		</view>
		<view class="m-t-30 m-b-30 flex" @click="goList('mall')">
			<image  :src="$util.img('/image/huaImg/10.png')" class="kficon" mode=""></image>
			<view class="m-l-20 border-bottom flex-1 p-b-20">
				<view class="font-30 font-weight-8">订单消息</view>
				<view class="font-24 flex-between" style="color: #BBBEC9;">
					{{mallCount==0?'暂无通知':'点击查看最新的通知'}}
					<view class="dot m-l-auto" v-if="mallCount>0"></view>
				</view>
			</view>
		</view>
		<view class="m-t-30 m-b-30 flex" @click="goList('group')">
			<image  :src="$util.img('/image/huaImg/11.png')" class="kficon" mode=""></image>
			<view class="m-l-20 border-bottom flex-1 p-b-20">
				<view class="font-30 font-weight-8">通知消息</view>
				<view class="font-24 flex-between" style="color: #BBBEC9;">
					{{groupCount==0?'暂无通知':'点击查看最新的通知'}}
					<view class="dot m-l-auto" v-if="groupCount>0"></view>
				</view>
			</view>
		</view>
		
	</view>
	<tabbar value="2" ref="diyTabbar"></tabbar>
	<!-- 登录 -->
	<!-- <login-pop ref="loginDialog"></login-pop> -->
	
  </view>
</template>

<script>
	import tabbar from '../../components/tabbar/tabbar.vue'
  export default {
	components: {
		tabbar
	},
    data() {
      return {
        StatusBar: getApp().globalData.StatusBar,
		subscribeCount: 0,
		groupCount: 0,
		mallCount: 0,

      }
    },
	onLoad() {
		// if (!uni.getStorageSync('token')) this.$refs.loginDialog.open();
		uni.hideTabBar();
	},
	onShow() {
		this.$refs.diyTabbar.init()
		if(uni.getStorageSync('token')) {
			this.getUnreadCount();
			// this.getUnreadCount1();
			// this.getUnreadCount2();
			// this.getUnreadCount3();
		}
		
	},
    methods: {
		goList(type) {
			if(!uni.getStorageSync('token')) return this.$util.showToast({title:'请先登录'})
			this.$util.redirectTo('/otherpages/butler/noticeInfo?type='+type)
		},
		getUnreadCount() {
			this.$api.sendRequest({
				url: "/sitemessage/api/sitemessage/getNewPerMessageCount",
				data: {},
				success: res => {
				 if(res.code == 0) {
					this.subscribeCount = Number(res.data.subscribe_count);
					this.groupCount = Number(res.data.group_count);
					this.mallCount = Number(res.data.mall_count);
				 } 
				}
			})
	   },
       getUnreadCount1() {
			this.$api.sendRequest({
				url: "/sitemessage/api/sitemessage/getPerMessageCount",
				data: {
					sub_type: 'subscribe',
				},
				success: res => {
				 if(res.code == 0) {
					this.subscribeCount = res.data.count
				 } 
				}
			})
	   },
	   getUnreadCount2() {
			this.$api.sendRequest({
				url: "/sitemessage/api/sitemessage/getPerMessageCount",
				data: {
					sub_type: 'group',
				},
				success: res => {
				 if(res.code == 0) {
					this.groupCount = res.data.count
				 } 
				}
			})
	   },
	   getUnreadCount3() {
			this.$api.sendRequest({
				url: "/sitemessage/api/sitemessage/getPerMessageCount",
				data: {
					sub_type: 'mall',
				},
				success: res => {
				 if(res.code == 0) {
					this.mallCount = res.data.count
				 } 
				}
			})
	   },
	   makePhone() {
			let siteInfo = uni.getStorageSync('siteInfo') || {};
			uni.makePhoneCall({
				phoneNumber: siteInfo.site_tel
			})
		},
    }
  }
</script>

<style lang="scss" scoped>
.indexbg {
	
	position: absolute;
	top: 0;
	background-position: 100% 100%;
	background-repeat: no-repeat;
	background-size: cover;
	width: 100%;
	height: 316rpx;
}
.container{
	width: 750rpx;
	min-height: 100vh;
	background-color: #fff;
}
.fixHeader {
  position:relative;
  // top:0;
  z-index: 9;
  width: 100%;
  box-sizing: border-box;
  padding-left: 30rpx;
  .info {
	  display: flex;
	  align-items: center;
	  image {
		  width: 72rpx;
		  height: 72rpx;
		  margin-right: 12rpx;
	  }
  }
}
.zxClass{
	position: relative;
	z-index: 5;
	margin: 40rpx 24rpx;  
	.kefuitem{
		width: 339rpx;  
		height: 264rpx;
		border-radius: 20rpx;
		// padding: 24rpx;
		box-sizing: border-box;
		
	}
	
}
.kficon{
	width: 96rpx;
	height: 96rpx;
}
.dot {
	width: 16rpx;
	height: 16rpx;
	background: #ee3c37;
	border-radius: 50%;
}

.contact {
	position: absolute;
	top: 0;
	left: 0;
	width: 339rpx;
	height: 260rpx;
	background: transparent;
}

</style>
